import * as React from "react";
import Modal from "antd/es/modal/Modal";
import {Button, Card, Col, Form, Input, InputNumber, notification, Row} from "antd";
import {
    IdcardOutlined,
    MailOutlined,
    PlusOutlined,
    UnorderedListOutlined,
    UserOutlined,
    WhatsAppOutlined
} from "@ant-design/icons";
import {fetchAllRole, updateRole} from "../../requests/RoleManageRequest";
import Checkbox from "antd/es/checkbox/Checkbox";
import {updateUser} from "../../requests/UserManageRequest";


class UpdateUserModal extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            isModalVisible: false,
            roleOptions: [],
            formRef: React.createRef(),
        };
        this.props.onRef(this)
    }


    componentDidMount = () => {
        fetchAllRole({pageNo:1,pageSize:200}).then(edpRoles => {
            let roles = edpRoles.result.map((pDomain) => this.toRoleCheckElement(pDomain))
            this.setState({roleOptions: roles})
        })
    }

    toRoleCheckElement = (roleDomain) => {
        return {
            "value": roleDomain.roleName,
            "label": roleDomain.displayName,
            "key": roleDomain.roleName,
        }
    }

    showModal = () => {
        this.setState({
            isModalVisible: true
        })
    };

    handleCancel = () => {
        this.setState({
            isModalVisible: false
        })
    };

    handleOk = () => {

        if (!this.props.userName) {
            notification.error({message: "更新用户失败", description: "请在表格中选择用户之后进行更新！"});
            return
        }

        this.state.formRef.current.validateFields()
            .then(values => {
                values['userName'] = this.props.userName
                console.log("Begin to update user name with params:" + JSON.stringify(values))
                updateUser(values).then(edpRole => {
                    notification.info({message: "更新用户成功", description: "更新用户" + edpRole.result.userName + "成功"});
                })
                this.setState({
                    isModalVisible: false
                })
            })
            .catch(info => {
                console.log('Validate message:', info);
            });
    };


    render = () => {
        return (
            <Modal title={"更新用户" + this.props.userName} visible={this.state.isModalVisible} onOk={this.handleOk}
                   onCancel={this.handleCancel}>
                <Form name="basic" ref={this.state.formRef}
                      initialValues={{'roles': this.props.roles}}>
                    <Form.Item
                        label="用户名" name="displayName">
                        <Input prefix={<UnorderedListOutlined/>}/>
                    </Form.Item>

                    <Form.Item
                        label="手机号" name="phoneNumber">
                        <Input prefix={<WhatsAppOutlined />}  />
                    </Form.Item>

                    <Form.Item
                        label="邮 箱" name="email">
                        <Input prefix={<MailOutlined/>}/>
                    </Form.Item>


                    <Form.Item name="roles" label="角色选择">
                        <Checkbox.Group
                            options={this.state.roleOptions}
                        />
                    </Form.Item>
                </Form>
            </Modal>
        );
    }
}

export default UpdateUserModal